<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../js/jquery.min.js"></script>
</head>

<body>
    <input type="checkbox" id="checkallBox">全选/全不选
    <div>
        <span>苹果</span>
        <!-- checked="checked" -->
        <input type="checkbox" name="items" value="苹果">
    </div>
    <div>
        <span>香蕉</span>
        <input type="checkbox" name="items" value="香蕉">
    </div>
    <div>
        <span>西瓜</span>
        <input type="checkbox" name="items" value="西瓜">
    </div>
    <div><span>草莓</span>
        <input type="checkbox" name="items" value="草莓">
    </div>
    <br>
    <button id="all">全选</button>
    <button id="no">全不选</button>
    <button id="reverse">反选</button>
    <button id="send">提交</button>
    <script>
        // $("#all").on("click",function(){
        //     if($(this).prop("checked")){
        //         $("[type='checkbox']").prop("checked",true)
        //     }else{
        //         $("[type='checkbox']").prop("checked",false)
        //     }
        // })
        var oItems = document.getElementsByName("items");
        var checkallBox = document.getElementById("checkallBox")
        $("#all").on("click", function () {
            for (var i = 0; i < oItems.length; i++) {
                oItems[i].checked = true
            }
            checkallBox.checked = true;
        })
        $("#no").on("click", function () {
            for (var i = 0; i < oItems.length; i++) {
                oItems[i].checked = false
            }
            checkallBox.checked = false
        })

        $("#reverse").on("click", function () {
            for (var i = 0; i < oItems.length; i++) {
                // if(oItems[i].checked){
                //     oItems[i].checked=false
                // }else{
                //     oItems[i].checked=true
                // }
                //简写
                oItems[i].checked = !oItems[i].checked
            }
            checkallBox.checked = true
            //判断是不是全选
            for (var j = 0; j < oItems.length; j++) {
                if (!oItems[j].checked) {
                    checkallBox.checked = false
                    break;
                }
            }
        })

        $("#send").on("click", function () {
            for (var i = 0; i < oItems.length; i++) {
                if (oItems[i].checked) {
                    alert(oItems[i].value)
                }
            }
        })

        checkallBox.onclick = function () {
            for (var i = 0; i < oItems.length; i++) {
                oItems[i].checked = this.checked
            }
        }

        for (var i = 0; i < oItems.length; i++) {
            oItems[i].onclick = function () {
                checkallBox.checked = true
                //判断是不是全选
                for (var j = 0; j < oItems.length; j++) {
                    if (!oItems[j].checked) {
                        checkallBox.checked = false
                        break;
                    }
                }
            }
        }


        function fn3(num) {
            this.a = num;
            fn4(this);
        }

        function fn4(obj) {
            obj.b = 10;
            obj.c = 20;
        }
        var obj1 = {};
        fn3.call(obj1, 10);
        console.log(obj1);

        for (var i = 1; i < 3; i++) {
            setTimeout(function timer() {
                console.log(i);
            }, 1000);
        }
    </script>

</body>

</html>